<template>
	<view class="content">
		<view class="top">
			智慧社区
		</view>
		<view class="top-inner">
			<view class="iconfont icon-dizhi inner-list">首尔甜城</view>
			<view class="ipt iconfont icon-a-1-sousuo">
				<input type="text" placeholder="搜索关键字" />
			</view>
		</view>
		<view class="nav">
			<navigator url="../fee/index" class="nav-box">
				<view class=" navfont navfee">
					<image src="../../static/ico/fees.png"></image>
				</view>
				<view>生活缴费</view>
			</navigator>
			<navigator url="../repairs/index" class="nav-box">
				<view class="navfont navrepairs">
					<image src="../../static/ico/houses.png"></image>
				</view>
				<view>物业报修</view>
			</navigator>
			<navigator url="../questionsFeedback/index" class="nav-box">
				<view class="navfont navquestions">
					<image src="../../static/images/ico/questions.png"></image>
				</view>
				<view>问题反馈</view>
			</navigator>
			<navigator url="../myhelp/myhelp" class="nav-box">
				<view class="navfont navhelp">
					<image src="../../static/ico/help.png"></image>
				</view>
				<view>我要帮助</view>
			</navigator>
		</view>
		<view class="headline">
			<view class="headlinecontent">
				<image class="toplogo" src="../../static/images/headline.png" mode=""></image>
				<text class="topline">关于我行对符合条条件的账户</text>
				<view class="redround"></view>
				<view class="more">更多</view>
				<view class="iconfont icon-a-10-you"></view>
			</view>
			<image class="topimgs" src="../../static/images/headlineimg.png" mode=""></image>
		</view>
		<view class="stores">
			<view class="shop">
				生活门店
			</view>
			<view class="free_seckill">
				<image class="life" src="../../static/images/free.jpg" mode=""></image>
				<image class="life" src="../../static/images/seckill.png" mode=""></image>
			</view>
		</view>
		<view class="information">
			<view class="information_title">
				<text class="news">资讯</text>
				<navigator url="../information/information" class="iconfont icon-a-10-you more">
				</navigator>
			</view>
			<view class="message">
				<view class="message_word">
					<text class="message_information">关于调整我行ATM跨行取现手 续费收费标准的公示</text>
					<text class="data">2021-07-23</text>
				</view>
				<view class="imgs">
					<image class="message_img" src="../../static/images/information_1.png" mode=""></image>
				</view>
			</view>
			<view class="message">
				<view class="message_word">
					<text class="message_information">施辉:从固定成本率比较你家 公司能挣钱吗?</text>
					<text class="data">2021-11-01</text>
				</view>
				<view class="imgs">
					<image class="message_img" src="../../static/images/information_2.png" mode=""></image>
				</view>
			</view>
			<view class="message">
				<view class="message_word">
					<text class="message_information">陈款磊:从公牛电器被罚探讨 转售价格限制</text>
					<text class="data">2021-11-01</text>
				</view>
				<view class="imgs">
					<image class="message_img" src="../../static/images/information_3.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.content {
		background: url(../../static/images/index_background.png) #f4f4f4;
		background-size: 100%;
		height: 40vh;

		.top {
			color: #fff;
			font-size: 38rpx;
			display: flex;
			justify-content: center;
			padding-top: 59rpx;
		}

		.top-inner {
			margin: 40rpx 32rpx 20rpx;
			display: flex;
			justify-content: space-between;

			.inner-list {
				color: #fff;
				font-size: 30rpx;
			}

			.ipt {
				display: flex;
				align-items: center;
				background: #fff;
				width: 300rpx;
				font-size: 30rpx;
				border-radius: 50rpx;
				padding-left: 30rpx;
				height: 50rpx;
				box-sizing: border-box;

				input {
					font-size: 30rpx;
					margin-left: 10rpx;
				}
			}
		}

		.nav {
			
			margin: 0 auto;
			background: #fff;
			height: 195rpx;
			width: 92%;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			
			.nav-box {
				width: 130rpx;
			}

			.navfont {
				width: 77rpx;
				height: 77rpx;
				text-align: center;
				margin: 0 auto;
				line-height: 77rpx;
				color: #fff;
				border-radius: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 54rpx;
					height: 54rpx;
				}
				
			}

			.navfee {
				background: #4f86ed;
			}

			.navrepairs {
				background: #71b78b;
			}

			.navquestions {
				background: #e39e5e;
			}

			.navhelp {
				background: #479cf7;
			}
		}

		.headline {
			width: 686rpx;
			height: 350rpx;
			margin: 22rpx auto 0;
			background-color: #FFFFFF;

			.headlinecontent {
				display: flex;
				width: 686rpx;
				height: 100rpx;
				line-height: 100rpx;
				margin: 0 auto;

				.toplogo {
					width: 90rpx;
					height: 60rpx;
					margin: 20rpx auto;
				}

				.topline {
					width: 400rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.redround {
					width: 20rpx;
					height: 20rpx;
					margin: 40rpx auto;
					background-color: #ff0015;
					border-radius: 50%;
				}
			}

			.topimgs {
				width: 686rpx;
				height: 252rpx;
				margin: 0 auto;
			}
		}

		.stores {
			width: 686rpx;
			height: 300rpx;
			margin: 0 auto;
			background-color: #FFFFFF;

			.shop {
				font-size: 34rpx;
				margin: 50rpx auto;
			}

			.free_seckill {
				display: flex;
				justify-content: space-between;

				.life {
					width: 300rpx;
					height: 200rpx;
				}
			}

		}

		.information {
			width: 686rpx;
			background-color: #FFFFFF;
			margin: 25rpx auto 150rpx;

			.information_title {
				display: flex;
				justify-content: space-between;
				width: 686rpx;
				font-size: 34rpx;
				margin: 50rpx 0;
				
				.more{
					color: #BCBCBC;
				}
			}

			.message {
				display: flex;
				width: 686rpx;
				height: 165rpx;
				margin: 25rpx 0;

				.message_word {
					flex: 1;
					display: flex;
					flex-direction: column;

					.message_information {
						color: #333;
						font-size: 24rpx;
					}

					.data {
						color: #bbbbbb;
						font-size: 18rpx;
						margin-top: 70rpx;
					}
				}

				.imgs {
					width: 250rpx;
					height: 160rpx;

					.message_img {
						width: 250rpx;
						height: 160rpx;

					}
				}
			}
		}
	}
</style>
